<template>
  <van-overlay
    :show="main.loginLayer"
    z-index="100"
    class="flex justify-center items-center"
  >
    <div class="wrapper">
      <div class="login-bg"></div>
      <div class="login-form">
        <div class="close" @click="main.closeLoginLayer"></div>

        <div class="content w-full h-full">
          <div class="title">{{ $t("layer.login.signIn") }}</div>
          <div class="flex flex-col gap-[10px] mt-[22px]">
            <div>
              <input
                v-model="formState.username"
                class="input-wrapper"
                type="text"
                :placeholder="`${
                  $t('page.setting.Enter') + $t('layer.login.user_name')
                }`"
                autocomplete="off"
              />
            </div>
            <div class="password-box mt-[22px]">
              <input
                v-model="formState.password"
                class="input-wrapper"
                :type="!isEye ? 'password' : 'text'"
                :placeholder="`${
                  $t('page.setting.Enter') + $t('layer.login.password')
                }`"
                autocomplete="off"
              />
              <van-icon
                v-if="isEye"
                class="icon"
                name="eye-o"
                @click="isEye = false"
              />
              <van-icon
                v-else
                class="icon"
                name="closed-eye"
                @click="isEye = true"
              />
            </div>
            <div class="flex flex-row-reverse cursor-pointer">
              <span class="forget-password mt-[18px]" @click="handleForget"
                >{{ $t("layer.login.ForgotPassword") }}?</span
              >
            </div>
            <div>
              <button class="submit-btn mt-[18px]" @click="hanleLogin">
                {{ $t("layer.login.signIn") }}
              </button>
            </div>
            <div
              class="text-[#c9d1e4] text-sm mt-[15px] mb-[1px] cursor-pointer"
            >
              {{ $t("user.jkgame_new") }}
              <span class="text-[#0fbfff]" @click="hanldeRegister">{{
                $t("layer.login.CreateanAccount")
              }}</span>
            </div>
          </div>
          <van-divider
            :style="{
              color: '#c9d1e4'
            }"
            >{{ $t("user.direct_login") }}</van-divider
          >

          <div class="flex justify-between pl-[24px] pr-[48px] mt-[18px]">
            <div
              class="visitor-login flex items-center p-[5px] text-[#c9d1e4] cursor-pointer"
              @click="touristLoginHandle"
            >
              <img
                class="w-[38px] h-[38px]"
                src="@/assets/login/youke@2x.png"
                alt=""
              />

              <span class="flex flex-1 justify-center text-[16px]">{{
                $t("user.visitor_login")
              }}</span>
            </div>
            <!-- <div class="link-login-wrapper cursor-pointer">
              <img
                class="w-[11px] h-[21px]"
                src="@/assets/login/facebook@2x.png"
                alt=""
              />
            </div> -->
            <div
              class="link-login-wrapper cursor-pointer"
              @click="googleHandle"
            >
              <img
                class="w-[18px] h-[18px]"
                src="@/assets/login/guge@2x.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <pc-register />
    <pc-forget></pc-forget>
  </van-overlay>
</template>
<script setup>
import { shallowRef, ref } from "vue";
import { mainAct } from "@/store/activeda";
import { userLogin } from "@/api/user";
import { ElNotification } from "element-plus";
import router from "@/router";
import { eventBus } from "@/utils/eventBus";
import { useRoute } from "vue-router";
import pcRegister from "./pc-register.vue";
import pcForget from "./pc-forget.vue";
import baseURL from "@/utils/baseURL";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const main = mainAct();
const googleHandle = () => {
  const clientId =
    main.oauth?.find(item => item.name == "Google")?.client_id || "";

  const url = window.location.href; // 你可以替换为不同的 URL
  const regex = /^(https?:\/\/[^\/]+)\//;

  const match = url.match(regex);

  if (match) {
    console.log("Extracted domain:", match[1]); // 提取的域名部分
    console.log("Path or hash:", match[2]); // 提取路径或哈希部分（例如: #/casino）
  } else {
    console.log("No valid URL found.");
  }
  const redirectUri = match[1] + "/";

  const googleAuthUrl =
    `https://accounts.google.com/o/oauth2/v2/auth?` +
    `client_id=${clientId}&` +
    `redirect_uri=${redirectUri}&` +
    `scope=openid profile email&` +
    `response_type=code&` +
    `prompt=select_account`;

  window.location.href = googleAuthUrl;
};

const isEye = ref(false);
const formState = ref({
  username: "",
  password: ""
});

const route = useRoute();

const touristLoginHandle = () => {
  main.touristLoginApi();
};

const hanldeRegister = () => {
  main.getCommonRegisterIsFee();
  main.showRegister();
};

const handleForget = () => {
  main.showForget();
};

const hanleLogin = () => {
  const p = {
    user_name: formState.value.username,
    password: formState.value.password
  };
  if (!p.user_name) {
    ElMessage.error(`${t("page.setting.Enter") + t("layer.login.user_name")}`);
    return;
  }
  if (!p.password) {
    ElMessage.error(`${$t("page.setting.Enter") + $t("layer.login.password")}`);
    return;
  }
  userLogin(p).then(res => {
    if (res?.errno == 0) {
      main.isLogin = true;
      main.token = res.data.token;
      main.user_detail = res.data.user_detail;
      main.loginLayer = false;
      eventBus.emit("showActiveProp");
      if (main.user_detail.payment_password_set == 0) {
        ElNotification({
          position: "top-right",
          duration: 0,
          zIndex: 1004,
          title: t("layer.wallet.tip"),
          message: t("layer.wallet.plzSetFst"),
          type: "warning"
        });
      }
      eventBus.emit("tigger");
    } else {
      return;
    }
  });
};
</script>

<style scoped lang="scss">
.wrapper {
  overflow: hidden;
  display: flex;
  width: 854px;
  height: 582px;
  margin: auto;
  border-radius: 10px;
  background-color: #2f4553;
  color: #fff;
  font-family: "TurretRoad", "PingFangSC";
  .login-bg {
    width: 410px;
    height: 582px;
    background: url("@/assets/login/bg.png") no-repeat;
    background-size: 100% 100%;
  }

  .login-form {
    flex: 1;
    padding: 16px;
    padding-top: 52px;
    position: relative;
    overflow: hidden;
    font-family: "PingFangSC";

    .close {
      position: absolute;
      width: 30px;
      height: 30px;
      top: 23px;
      right: 16px;
      cursor: pointer;
      background: url("@/assets/login/login-close.png") no-repeat;
      background-size: 100% 100%;
    }

    .content {
      .title {
        // width: 60px;
        height: 33px;
        margin: 29px 105px 22px 0px;
        font-family: TurretRoad;
        font-size: 30px;
        font-weight: 800;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: left;
        color: #fff;
      }
      .password-box {
        position: relative;

        .icon {
          position: absolute;
          width: 20px;
          height: 20px;
          top: 50%;
          transform: translateY(-50%);
          right: 20px;
        }
      }

      .input-wrapper {
        width: 100%;
        height: 52px;
        padding: 10px 10px 12px;
        padding-right: 40px;
        border-radius: 3px;
        font-family: PingFangSC;
        border: solid 2px #426073;
        background-color: #1f2937;
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: left;
        color: #c9d1e4;
        outline: none;
      }

      .submit-btn {
        width: 100%;
        height: 54px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #1475e1;
        font-family: PingFangSC;
        font-size: 20px;
        border-radius: 3px;
      }

      .submit-btn:hover {
        background-color: #0f64d9;
      }
      .forget-password {
        font-family: PingFangSC;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: left;
        color: #c9d1e4;
      }

      .visitor-login {
        width: 161px;
        height: 48px;
        border-radius: 29px;
        border: solid 1px rgba(115, 152, 192, 0.3);
        background-color: #2b3f4b;
      }

      .link-login-wrapper {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: solid 1px rgba(115, 152, 192, 0.3);
        background-color: #2b3f4b;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
